<template>
	<view class="container-box">
		<custom-info></custom-info>
		<view class="myOrder-box">
			<view class="box-flex title-box">
				<view class="marks-box"></view>
				<view class="font-500">我的订单</view>
			</view>
			<view class="order-menu-box">
				<view v-for="(item, index) in menuIcons" @tap.stop="handleNavigate(item.url)" :key="index">
					<view class="menu-box">
						<view class="menuIcon">
							<image :src="item.icon" mode="aspectFit"></image>
						</view>
					</view>
					<view>{{ item.label }}</view>
				</view>
			</view>
		</view>
		<view class="myOrder-box basic-box">
			<view
				v-for="(item, index) in operateIcons"
				@tap.stop="handleNavigate(item.url)"
				:class="['operate-box', index === menuIcons.length - 1 ? 'border-none-box' : '']"
				:key="index"
			>
				<view>{{ item.label }}</view>
				<view class="arrow-right">
					<image :src="arrowRightIcon" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</view>
	<tabbar :current="2"></tabbar>
	<uni-popup ref="schoolCamper" type="center">
		<view>
			<view class="popup-content-box">
				<view class="tips-img-box">
					<view class="changeCardIcon">
						<image :src="changeCardIcon" mode="aspectFit" />
					</view>
					<view class="englishCardIcon">
						<image :src="englishCardIcon" mode="aspectFit" />
					</view>
				</view>
				<view class="cardNum-container-box">
					<view class="cardNum-box flex-box">
						<view style="flex: 1">
							<input
								style="width: 100%; height: 100%"
								v-model="cardNum"
								placeholder="请输入校园营队券码"
								@confirm="handleCheckCampCoupon"
								placeholder-class="input-placeholder"
							/>
						</view>
					</view>
					<view style="margin-top: 40rpx" v-if="JSON.stringify(campCouponInfo) === '{}'">
						<button @tap="handleCheckCampCoupon" type="primary" style="background-color: rgba(67, 207, 124, 1); border-radius: 57rpx">下一步</button>
					</view>
					<view v-if="JSON.stringify(campCouponInfo) !== '{}'">
						<view class="mt-40-box tips-box">营队信息：</view>
						<view class="camper-title-box">{{ campCouponInfo.title }}</view>
						<view class="mt-40-box tips-box">活动时间：</view>
						<view class="camper-title-box">{{ campCouponInfo.campPeriodStartDate }} ~ {{ campCouponInfo.campPeriodEndDate }}</view>
						<view style="margin-top: 40rpx">
							<button @tap="handleChangeCamperNext" type="primary" style="background-color: rgba(67, 207, 124, 1); border-radius: 57rpx">下一步</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
import { ref } from 'vue';
import tabbar from '@/components/tabbar/index.vue';
import CustomInfo from '@/components/custom-info/custom-info.vue';
import allIcon from '@/asstes/images/mine/allIcon.png';
import loadingPayIcon from '@/asstes/images/mine/loadingPayIcon.png';
import lodingJoinIcon from '@/asstes/images/mine/lodingJoinIcon.png';
import tokeOutIcon from '@/asstes/images/mine/tokeOutIcon.png';
import arrowRight from '@/asstes/images/mine/arrowRightIcon.png';
import changeCardIcon from '@/asstes/images/mine/changeCardIcon.png';
import englishCardIcon from '@/asstes/images/mine/englishCardIcon.png';
import scanerIcon from '@/asstes/images/mine/scanerIcon.png';
import CamperApi from '@/api/camper/api';
import { useOrderStore } from '@/stores/order';
import { onShow, onBackPress } from '@dcloudio/uni-app';
const orderStore = useOrderStore();
// 校园营队券码
let cardNum = ref('');
// 右箭头
const arrowRightIcon = ref(arrowRight);
// 营对信息
const campCouponInfo = ref({});
// 订单菜单
const menuIcons = ref([
	{
		label: '全部',
		url: '/pages/order/index?status=99',
		icon: allIcon
	},
	{
		label: '待付款',
		url: '/pages/order/index?status=0',
		icon: loadingPayIcon
	},
	{
		label: '已购买',
		url: '/pages/order/index?status=1',
		icon: lodingJoinIcon
	},
	{
		label: '已取消/已退款',
		url: '/pages/order/index?status=2',
		icon: tokeOutIcon
	}
]);
// 操作菜单
const operateIcons = ref([
	{
		label: '我的营员',
		url: '/pages/myCamper/myCamper'
	},
	{
		label: '校园营队券',
		url: '校园营队券'
	},
	{
		label: '个人资料',
		url: '/pages/mine/personInfo'
	}
	//  {
	// 	label: '联系客服',
	// 	url: '',
	// }
]);
// 校园营队卷弹框
const schoolCamper = ref(null);
/**
 * @param {string} url
 * @description 跳转
 */
function handleNavigate(url) {
	if (url === '校园营队券') {
		schoolCamper.value.open();
		return;
	}
	uni.navigateTo({
		url
	});
}
function handleCheckCampCoupon() {
	const param = {
		snCode: cardNum.value
	};
	CamperApi.checkCampCoupon(param).then((res) => {
		campCouponInfo.value = res.data;
		orderStore.routeId = res.data.routeId;
		orderStore.campId = res.data.campId;
		orderStore.snCode = cardNum.value;
	});
}
/**
 * @description
 */
function handleChangeCamperNext() {
	orderStore.orderType = 2;
	uni.navigateTo({
		url: '/pages/myCamper/selectCamper'
	});
}

onShow(() => {
	schoolCamper.value.close();
	campCouponInfo.value = {};
	cardNum.value = '';
});

onBackPress(() => {
	uni.sendNativeEvent('closeMe', { delay: 10 }, (res) => {
		console.log('closeMe----' + JSON.stringify(res));
	});
});
</script>

<style lang="scss" scoped>
.container-box {
	margin-left: 20rpx;
	margin-right: 20rpx;
	padding-top: 24rpx;

	.box-flex {
		display: flex;
		align-items: center;
	}

	.myOrder-box {
		margin-top: 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 40rpx 30rpx;
		color: #000;
		font-size: 28rpx;

		.marks-box {
			margin-right: 10rpx;
			width: 6rpx;
			height: 20rpx;
			opacity: 1;
			border-radius: 10rpx;
			background: linear-gradient(225deg, rgba(52, 165, 255, 1) 0%, rgba(54, 255, 173, 1) 100%);
		}

		.font-500 {
			font-weight: 500;
		}

		.title-box {
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid rgba(229, 229, 229, 0.69);
		}

		.operate-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 20rpx;
			padding-bottom: 16rpx;
			border-bottom: 1rpx solid rgba(229, 229, 229, 0.69);

			.arrow-right {
				width: 12rpx;
				height: 22rpx;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
	}

	.order-menu-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: center;
		margin-top: 32rpx;

		.menu-box {
			display: flex;
			align-items: center;
			justify-content: center;

			.menuIcon {
				width: 60rpx;
				height: 60rpx;
				margin-bottom: 12rpx;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
	}

	.basic-box {
		padding-top: 16rpx;
		padding-bottom: 16rpx;
	}
}

.popup-content-box {
	width: 656rpx;
	border-radius: 40rpx;
	background: rgba(255, 255, 255, 1);
	padding-bottom: 60rpx;
}

.tips-img-box {
	margin-left: 60rpx;
	top: -48rpx;
	position: absolute;
}

.changeCardIcon {
	width: 258rpx;
	height: 92rpx;

	image {
		width: 100%;
		height: 100%;
		display: block;
	}
}

.englishCardIcon {
	width: 264rpx;
	height: 68rpx;
	margin-top: -20rpx;

	image {
		width: 100%;
		height: 100%;
		display: block;
	}
}

.cardNum-container-box {
	padding: 0 54rpx;
	padding-top: 162rpx;

	.cardNum-box {
		border-radius: 10rpx;
		background: rgba(245, 245, 245, 1);
		padding: 28rpx 44rpx;
		justify-content: space-between;
	}
}

.input-placeholder {
	color: rgba(166, 166, 166, 0.56);
	font-size: 32rpx;
}

.scanerIcon {
	width: 32rpx;
	height: 32rpx;

	image {
		width: 100%;
		height: 100%;
		display: block;
	}
}

.btn-box {
	margin-top: 40rpx;
	background: #43cf7c;
	border-radius: 60rpx;
	color: #fff;
	font-size: 36rpx;
	padding: 26rpx 0;
	text-align: center;
}

.mt-40-box {
	margin-top: 40rpx;
}

.tips-box {
	font-size: 32rpx;
	color: rgba(0, 0, 0, 0.55);
}

.camper-title-box {
	margin-top: 16rpx;
	font-size: 32rpx;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>
